<template>
  <div style="display: flex; padding-top: 10px;">

    <el-button @click="handlerFn" h="40px" type="" link>
      <el-icon size="25">
        <Expand v-if="isopen" />
        <Fold v-else />
      </el-icon>
    </el-button>

    <el-breadcrumb separator="/" px-0.5>
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <!-- <el-breadcrumb-item>
        <a href="/">promotion management</a>
      </el-breadcrumb-item> -->

      <el-breadcrumb-item v-for="item in $route.matched" :key="item.path" :to="{ path: item.path }">
        {{ item.meta.title }}
      </el-breadcrumb-item>

    </el-breadcrumb>
  </div>
</template>

<script setup lang="ts">
import {
  Expand,
  Fold,
} from "@element-plus/icons-vue";
import { ref } from 'vue';

import mitter from "../../util/mitter"

const handlerFn = () => {
  isopen.value = !isopen.value
  mitter.emit('collapse', isopen.value)
}

let isopen = ref(true)

</script>

<style scoped>
div {
  display: flex;
  /* background-color: pink; */
  height: 100%;
}
</style>